<!DOCTYPE html>
<html>
<head>
	<title>Note</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.js"></script>
	<script>
		var myForm, formData, sel;
		function doOnLoad() {
			sel = byId("formName");
			formData = [
				{type: "settings", position: "label-left", labelWidth: 130, inputWidth: 150, noteWidth: 160},
				{type: "input", name: "name", label: "Full name", value: "James Belop", note: {text: "please enter your full name here"}},
				{type: "input", name: "mail", label: "E-mail address", value: "james@mail.com", offsetTop: 10},
				{type: "checkbox", name: "news", label: "Subscribe on news", checked: true, offsetTop: 10, note: {text: "you will get our news once a week"}}
			];
			myForm = new dhtmlXForm("myForm", formData);
			myForm.forEachItem(function(id){
				sel.options.add(new Option(myForm.getItemLabel(id),id));
			});
		}
		function byId(id) {
			return document.getElementById(id);
		}
		function setNote() {
			myForm.setNote(sel.options[sel.selectedIndex].value, {text: byId("formNote").value});
		}
		function clearNote() {
			myForm.clearNote(sel.options[sel.selectedIndex].value);
		}
	</script>
</head>
<body onload="doOnLoad();">
	<div>
		<select id="formName"></select>
		<input type="text" id="formNote" value="leave blank if you plan to use account as gift for someone">
		<input type="button" onclick="setNote();" value="set">
		<input type="button" onclick="clearNote();" value="clear">
	</div>
	<div id="myForm" style="height:500px;margin-top: 50px;"></div>
</body>
</html>